<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可视化平台</title>
    <link rel="stylesheet" href="./assets/css/reset.css">
</head>
<body>
    <!-- <div class="text"></div> -->
        <!-- 头部 -->
        <header>
            <h1>大数据可视化平台</h1>
            <span></span>
        </header>
        <!-- 头部 -->
        <!-- 内容 -->
        <section class="charts">
        <div class="column">
            <div class="box" style="height: 4rem;"> 
                <div class="alltitle"> 标题样式 </div>
                <div class="boxz" style="width:100%;height:90%;"></div>
            </div>
            <div class="box" style="height: 2.66rem;">
                <div class="alltitle">标题样式</div>
                <div class="box2" style="width:100%;height:3rem;">
                    <table>
                        <tr>
                            <td>单号</td>
                            <td style="margin-left: .8rem /* 10/100 */;">金额</td>
                            <td style="margin-left: -10px /* 10/100 */;">品名</td>
                            <td>时间</td>
                        </tr>
                    </table>
                    <hr>
                    <div class="tableCenter" id="box" >
                        <ul id="ul1">
                            <li>
                                <span>1000378432</span>
                                <span>199</span>
                                <span>手机</span>
                                <span>18小时</span>
                            </li>
                            <li>
                                <span>1000378432</span>
                                <span>199</span>
                                <span>手机</span>
                                <span>18小时</span>
                            </li>
                            <li>
                                <span>1000378432</span>
                                <span>199</span>
                                <span>手机</span>
                                <span>18小时</span>
                            </li>
                            <li>
                                <span>1000378432</span>
                                <span>199</span>
                                <span>手机</span>
                                <span>18小时</span>
                            </li>
                            <li>
                                <span>1000378432</span>
                                <span>199</span>
                                <span>手机</span>
                                <span>18小时</span>
                            </li>
                            <li>
                                <span>1000378432</span>
                                <span>199</span>
                                <span>手机</span>
                                <span>18小时</span>
                            </li>
                            <li>
                                <span>1000378432</span>
                                <span>199</span>
                                <span>手机</span>
                                <span>18小时</span>
                            </li>
                            <li>
                                <span>1000378432</span>
                                <span>199</span>
                                <span>手机</span>
                                <span>18小时</span>
                            </li>
                            <li>
                                <span>1000378432</span>
                                <span>199</span>
                                <span>手机</span>
                                <span>18小时</span>
                            </li>
                            <li>
                                <span>1000378432</span>
                                <span>199</span>
                                <span>手机</span>
                                <span>18小时</span>
                            </li>
                           <div id="ul2"></div>
                        </ul>
                        <!-- <div id="ul2"></div> -->
                    </div>
                </div>
            </div>
            <div class="box" style="height: 2.66rem;">
                <div class="alltitle">标题样式</div>
                <div class="box3" style="width:100%;height:90%;">
                    
                </div>
            </div>
        </div>
        <div class="column">
            <div class="box" style="height: 2.3rem;">
                <!-- <div class="box4hand" style="width:2.6rem /* 260/100 */">总体情况<span>(单位：元)</span></div> -->
                <div class="box4" style="width:100%;height:90%;">
                    <div class="box31" >
                        <div class="box4biaoti1">总体情况<span>(单位：元)</span></div>
                        <div class="box4biaotimian">271378</div>
                    </div>
                    <div>
                        <div class="box4biaoti">标题样式</div>
                        <div class="box32" ></div>
                    </div>
                    <div>
                        <div class="box4biaoti">标题样式</div>
                        <div class="box33" ></div>
                    </div>
                    <div>
                        <div class="box4biaoti">标题样式</div>
                        <div class="box34" ></div>
                    </div>
                </div>
            </div>
            <div class="box" style="height: 3.5rem;">
                <div class="alltitle">标题样式</div>
                <div class="box5" style="width:100%;height:90%;"></div>
            </div>
            <div class="box" style="height: 3.4rem;">
                <div class="alltitle">标题样式</div>
                <div class="box6" style="width:100%;height:90%;"></div>
            </div>
        </div>
        <div class="column">
            <div class="box" style="height: 3rem;">
                <div class="alltitle">标题样式</div>
                <div class="box7" style="width:100%;height:90%; ">
                    <table class="table">  
                        <div  class="rightTop" >
                            <tr>
                                <td>排名</td>
                                <td>公司</td>
                                <td>数量</td>
                                <td>增长率</td>
                            </tr>
                            <tr>
                                <td><span style="background-color: rgb(237, 64, 93);">1</span></td>
                                <td>腾讯</td>
                                <td>113万</td>
                                <td>98%</td>
                            </tr>
                            <tr>
                                <td><span style="background-color: rgb(247, 140, 68);">2</span></td>
                                <td>百度</td>
                                <td>8974502万</td>
                                <td>98%</td>
                            </tr>
                            <tr>
                                <td><span style="background-color: rgb(73, 188, 247);">3</span></td>
                                <td>新浪</td>
                                <td>1139473万</td>
                                <td>83%</td>
                            </tr>
                            <tr>
                                <td><span style="background-color: rgb(135, 135, 135);">4</span></td>
                                <td>网易</td>
                                <td>1139832万</td>
                                <td>47%</td>
                            </tr>
                            <tr>
                                <td><span style="background-color: rgb(135, 135, 135);">5</span></td>
                                <td>雅虎</td>
                                <td>11393842万</td>
                                <td>72%</td>
                            </tr>
                        </div>
                    </table>
                </div>
            </div>
            <div class="box" style="height: 3rem;">
                <div class="alltitle">标题样式</div>
                <div class="box8" style="width:100%;height:90%;">
                    <table class="table">  
                        <div  class="rightTop" >
                            <tr>
                                <td>排名</td>
                                <td>公司</td>
                                <td>数量</td>
                                <td>增长率</td>
                            </tr>
                            <tr>
                                <td><span style="background-color: rgb(237, 64, 93);">1</span></td>
                                <td>腾讯</td>
                                <td>113万</td>
                                <td>98%</td>
                            </tr>
                            <tr>
                                <td><span style="background-color: rgb(247, 140, 68);">2</span></td>
                                <td>百度</td>
                                <td>8974502万</td>
                                <td>98%</td>
                            </tr>
                            <tr>
                                <td><span style="background-color: rgb(73, 188, 247);">3</span></td>
                                <td>新浪</td>
                                <td>1139473万</td>
                                <td>83%</td>
                            </tr>
                            <tr>
                                <td><span style="background-color: rgb(135, 135, 135);">4</span></td>
                                <td>网易</td>
                                <td>1139832万</td>
                                <td>47%</td>
                            </tr>
                            <tr>
                                <td><span style="background-color: rgb(135, 135, 135);">5</span></td>
                                <td>雅虎</td>
                                <td>11393842万</td>
                                <td>72%</td>
                            </tr>
                        </div>
                    </table>
                </div>
            </div>
            <div class="box" style="height: 3.2rem;">
                <div class="alltitle">标题样式</div>
                <div class="box9" style="width:100%;height:100%;"></div>
            </div>
        </div>
    </section>
        <!-- 内容 -->
    
    <script src="./assets/js/flexible.js"></script>
    <script src="http://unpkg.com/jquery"></script>
    <script src="https://unpkg.com/webopenfather-date@1.0.1/dist/wofDate.js"></script>
    <script src="https://unpkg.com/echarts"></script>
    <script src="./assets/js/lefttop.js"></script>
    <script src="./assets/js/lefcenter.js"></script>
    <script src="./assets/js/leftbuttom.js"></script>
    <script src="./assets/js/centerCenter.js"></script>
    <script src="./assets/js/centerBottom.js"></script>
    <script src="./assets/js/rightButtom.js"></script>
    <script src="./assets/js/centerTop.js"></script>
    <script src="./assets/js/centerTop33.js"></script>
    <script src="./assets/js/centerTop34.js"></script>
    <script src="./assets/js/index.js"></script>


    <script>
        setInterval(()=>{
            $('header span').html(wofDate.format('Y-m-d H:i:s'))
        },1000)
    </script>
</body>
</html>